<template>
  <div class="form-input-area">
    <div
      class="submit-button-style-first f-14 c-o f-w-600 checkdomain"
      style="
        cursor: pointer;
        display: inline-block;
        padding: 5px 0;
        border-radius: 8px;
      "
      @click="showSelectDomain"
    >
      从我的域名列表选择域名
    </div>
    <div class="flx-row-s-s div-line" style="margin-top: 20px">
      <div class="long-name">您要解析的域名</div>
      <div style="width: 500px; position: relative">
        <Input
          v-model="dnText"
          wrap="hard"
          type="textarea"
          :autosize="{ minRows: 5, maxRows: 5 }"
          :placeholder="'每行1个域名，可按Enter键进行换行，最多' + maxDnNumber + '个域名'"
          @on-blur="domainBlur(true)"
        />
        <span class="c-g number-tips">{{ curDnNumber }} / {{maxDnNumber}}</span>
      </div>
    </div>
    <div class="flx-row-s-c div-line long-name-nece">
      <div class="long-name">主机记录</div>
      <Input
        v-model.trim="host"
        placeholder="请输入主机记录"
        style="width: 250px"
        @on-change="hostChangeEvent"
      />
    </div>
    <div class="flx-row-s-c div-line long-name-nece">
      <div class="long-name">记录类型</div>
      <Select v-model="type" style="width: 250px">
        <Option v-for="item in typeList" :key="item.type" :value="item.type">{{
          item.type
        }}</Option>
      </Select>
      <span v-if="type !== ''" style="padding: 10px 0 10px 10px; box-sizing: border-box;">{{ desc }}</span>
    </div>
    <div class="flx-row-s-c div-line long-name-nece">
      <div class="long-name">线路类型</div>
      <Select v-model="lineId" style="width: 250px">
        <Option
          v-for="item in lineList"
          :key="item.lienId"
          :value="item.lienId"
          >{{ item.lineName }}</Option
        >
      </Select>
    </div>
    <div class="flx-row-s-c div-line long-name-nece">
      <div class="long-name">记录值</div>
      <Input
        v-model.trim="value"
        placeholder="请输入记录值"
        style="width: 250px"
        @on-change="valueChangeEvent"
      />
    </div>
    <div class="flx-row-s-c div-line">
      <div class="flx-row-s-c long-name-nece">
        <div class="long-name">MX优先级</div>
        <Input
          v-model="mx"
          placeholder="请输入MX优先级"
          style="width: 250px"
          :number="true"
          type="number"
          @on-blur="mxBlurEvent"
          @on-change="mxChangeEvent"
        />
      </div>

      <span class="c-black f-14" style="margin-left: 20px"
        >MX优先级范围1-20</span
      >
    </div>
    <div class="flx-row-s-c div-line">
      <div class="flx-row-s-c long-name-nece">
        <div class="long-name">TLL</div>
        <Input
          v-model="ttl"
          placeholder="请输入TLL"
          style="width: 250px"
          :number="true"
          type="number"
          @on-blur="tllBlurEvent"
          @on-change="tllChangeEvent"
        />
      </div>

      <span class="c-black f-14" style="margin-left: 20px"
        >TLL范围600-604800</span
      >
    </div>
    <div class="flx-row-s-c div-line">
      <div class="long-name">备注</div>
      <Input
        v-model="remark"
        placeholder="请输入备注"
        style="width: 250px"
        type="text"
      />
    </div>
    <div class="flx-row-s-c div-line">
      <div class="long-name">手机号码</div>
      <span class="c-d2 f-14">{{ mobile }}</span>
      <div
        class="user-normal-button form-button-size"
        style="margin-left: 10px"
        @click="getCodeEvent"
      >
        {{ senCodeText }}
      </div>
      <span
        class="c-black f-14"
        style="padding: 10px 0; box-sizing: border-box; margin-left: 20px"
        >若手机号已停用无法收到短信，请联系在线客服!</span
      >
    </div>
    <div class="flx-row-s-c div-line long-name-nece">
      <div class="long-name">短信验证码</div>
      <Input v-model.trim="smsCode" style="width: 250px" />
    </div>
    <div
      class="user-strong-button submit-button-style submit-button-style-first"
      style="margin-top: 15px"
      @click="submit"
    >
      确认
    </div>
    <Lodding :loading="loading" />
    <analysisResultModal
      title="域名解析结果"
      :show.sync="resultModalShow"
      :suc-list="resultList"
    ></analysisResultModal>
    <domain-select-modal
        :show.sync="domainSelectModalShow"
        @selectDomainConfirmEvent="selectDomainConfirmEvent"
        @cancelDomainConfirmEvent="cancelDomainConfirmEvent"
    />
  </div>
</template>

<script>
import Lodding from "_c/spin/loading";
import { parseDomain } from "@/utils/formatDomain";
import {
  domainResolutionGetLine,
  batchAsalysis,
} from "@/api/bidding";
import { sendCode } from "@/api/user";
import DomainSelectModal from "_c/modal/domainSelectModal/domainSelectModal.vue";
export default {
  name: "VipBatchAnalysisForm",
  components: {
    Lodding,
    analysisResultModal: () =>
      import("_c/modal/analysisResultModal/analysisResultModal.vue"),
    DomainSelectModal
  },
  // layout: "user",
  data() {
    return {
      dmName: false,
      loading: false,
      breadCrumb: [{name: "管理中心"},{ name: "域名管理" }, { name: "域名解析" }],
      tablist: [
        {
          name: "批量解析",
          to: "/user/batchanalysis",
        },
        {
          name: "高级批量解析",
          to: "/user/batchanalysis/senioranalysis",
        },
      ],
      rule: 0,

      // 表单数据
      dnText: "",
      curDnNumber: 0,
      maxDnNumber: 200,
      // 线路ID
      lineId: -1,
      // 线路
      lineList: [],
      // 记录类型选中
      type: "",
      // 记录类型
      typeList: [],
      // 主机记录
      host: "",
      // 记录值
      value: "",
      // 是否验证通过
      isValue: false,
      // mx记录值
      mx: 1,
      // tll
      ttl: 600,
      // 备注
      remark: "",
      // 短信验证码
      smsCode: "",
      isSendCode: false,
      senCodeText: "获取短信验证码",

      // 结果数据
      resultModalShow: false,
      resultList: [],

      // 选中域名数据
      selectList: [],

      domainSelectModalShow: false
    };
  },
  computed: {
    mobile() {
      return this.$store.state.user.mobile;
    },
    desc() {
      if (this.typeList.length === 0) {
        return "";
      }
      if (!this.type) {
        return "";
      }
      const data = this.typeList.filter((o) => {
        return this.type === o.type;
      });
      return data[0].desc;
    },
  },
  created() {
    this.getDomainResolutionGetLine();
  },
  mounted() {
    const dnList = this.$route.params.dnList;
    if (dnList && dnList.length > 0) {
      this.dnText = dnList.join("\n");
    }
  },
  methods: {
    domainBlur(isFilter) {
      if (isFilter) {
        this.dnText = parseDomain(this.dnText, false)
      }
      if (this.dnText !== '' && this.dnText.length > 0) {
        let arr = this.dnText.split("\n")
        if (arr.length > this.maxDnNumber) {
          arr = arr.splice(0, 200)
          this.dnText = arr.join("\n")
        }
        this.curDnNumber = arr.length
      }
    },
    // 获取记录类型、线路
    async getDomainResolutionGetLine() {
      const { code, data } = await domainResolutionGetLine();
      if (code === 200 && data) {
        this.lineList = data.lineList;
        this.lineList.length > 0 && (this.lineId = this.lineList[0].lienId);
        this.typeList = data.typeList;
      }
    },
    // 主机记录验证
    hostChangeEvent() {
      if (!this.host) return false;
      this.$nextTick(() => {
        this.host = this.host.replace(/[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/g, "");
      });
    },
    // 验证记录值
    valueChangeEvent() {
      if (!this.value) return false;
      this.$nextTick(() => {
        this.value = this.value.replace(/[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/g, "");
      });
    },
    // max记录值焦点离开事件
    mxBlurEvent() {
      if (this.mx <= 0 || this.mx > 20) {
        this.$Message.warning("MX优先级范围1-20");
        return false;
      }
    },
    // max记录值Change事件
    mxChangeEvent(event) {
      if (!event.target.value) return false;
      if (parseInt(event.target.value) <= 0) {
        this.$nextTick(() => {
          this.mx = 1;
        });
        return false;
      }
      if (parseInt(event.target.value) > 20) {
        this.$nextTick(() => {
          this.mx = 20;
        });
        return false;
      }
    },
    // max记录值焦点离开事件
    tllBlurEvent() {
      if (this.ttl < 600 || this.ttl > 604800) {
        this.$Message.warning("TLL范围600-604800");
        return false;
      }
    },
    // max记录值Change事件
    tllChangeEvent(event) {
      if (!event.target.value) return false;
      if (parseInt(event.target.value) <= 600) {
        this.$nextTick(() => {
          this.ttl = 600;
        });
        return false;
      }
      if (parseInt(event.target.value) > 604800) {
        this.$nextTick(() => {
          this.ttl = 604800;
        });
        return false;
      }
    },
    // 获取短信验证吗
    async getCodeEvent() {
      if (!this.isSendCode) {
        let count = 60;
        this.isSendCode = true;
        this.showLoading = true;
        const { code } = await sendCode();
        this.showLoading = false;
        if (code === 200) {
          this.smsInterval = setInterval(() => {
            count -= 1;
            this.senCodeText = `${count}s后重新发送`;
            if (count === 0) {
              this.isSendCode = false;
              this.senCodeText = "重新发送";
              this.smsInterval && clearInterval(this.smsInterval);
            }
          }, 1000);
        } else {
          this.isSendCode = false;
        }
      }
    },
    selectDomainConfirmEvent(domain) {
      this.domainSelectModalShow = false
      this.dnText = domain
      this.domainBlur(false)
    },
    cancelDomainConfirmEvent() {
      this.domainSelectModalShow = false
    },
    showSelectDomain() {
      this.domainSelectModalShow = true
    },
    submit() {
      if (this.dnText === "") {
        this.$Message.warning("请输入域名!");
        return false;
      }

      if (!this.host) {
        this.$Message.warning("请输入主机记录!");
        return false;
      }
      if (!this.type) {
        this.$Message.warning("请输入记录类型!");
        return false;
      }
      if (!this.value) {
        this.$Message.warning("请输入记录值!");
        return false;
      }
      if (!this.ttl) {
        this.$Message.warning("请输入记录值!");
        return false;
      }
      if (!this.smsCode) {
        this.$Message.warning("请输入验证码!");
        return false;
      }
      this.batchAsalysis();
    },
    async batchAsalysis() {
      this.showLoading = true;
      const params = {};
      params.domainNames = this.dnText.split("\n");
      params.host = this.host;
      params.lineId = this.lineId;
      params.mx = this.mx;
      params.remark = this.remark;
      params.type = this.type;
      params.value = this.value;
      params.ttl = this.ttl;
      params.code = this.smsCode;
      const { code, data } = await batchAsalysis(params);
      this.showLoading = false;
      if (code === 200) {
        this.resultList = data;
        this.resultModalShow = true;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.number-tips {
  position: absolute;
  bottom: 10px;
  right: 20px;
}
.submit-button-style-first {
  margin-left: 145px;
}
</style>

